<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <style type="text/css">
        /*img{*/
        /*border:1px solid blue;*/
        /*}*/
        #shoot {
            position: relative;
            left: 0px;
        }

        #zombie {
            position: relative;
            left: 1000px;
        }

        #pb {
            position: absolute;
            left: 57px;
            top: 85px;
            display: none;
        }

        #pbh {
            position: absolute;
            left: 1156px;
            top: 85px;
            display: none;
        }
    </style>
</head>
<body style="border:1px solid red">
<img id="shoot" src="img/Peashooter.gif"/>
<img id="pb" src="img/PB00.gif"/>
<img id="zombie" src="img/Zombie.gif"/>
<img id="pbh" src="img/PeaBulletHit.gif"/>
</body>
    <script type="text/javascript" src="js1/jquery-1.11.1.js"></script>
    <script type="text/javascript" >
        setInterval(function () {
            $("#pb").show().animate({left:"1156px"},3000,function () {
                $("#pb").hide().css("left","57px");
                $("#pbh").show();
                setTimeout(function () {
                    $("#pbh").hide();
                },200);
            })
        },1000)
    </script>
</html>